<template>
  <Page header="个人信息" is-back>
    <div class="userInfo">
      <div class="form-box">
        <u-form :model="form" ref="uForm" label-position="top" :rules="rules">
          <u-form-item required label="姓名" prop="nickname"><u-input v-model="form.nickname" /></u-form-item>
          <u-form-item required label="手机号" prop="phone"><u-input v-model="form.phone" type="tel"/></u-form-item>
          <u-form-item label="头像">
            <u-upload :action="action" max-count="1" :file-list="fileList" @on-success="successFile" @on-remove="removeFile"></u-upload>
          </u-form-item>
        </u-form>
      </div>
    </div>
    <div class="button-group">
      <div class="primary-button large" @click="submitForm">保存</div>
    </div>
  </Page>
</template>
<script>
import Page from "../../components/Page.vue";
import { mapGetters } from 'vuex'

export default {
  name: "index",
  components: {Page},
  computed: {
    ...mapGetters(['token']),
  },
  data() {
    return {
      form: {
        id: '',
        nickname: '',
        phone: '',
        avatar: '',
      },
      action: this.$baseUrl + '/infra/file/upload',
      fileList: [

      ],
      rules: {
        nickname: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad() {
    if (this.token) {
      this.$api.getMemberInfo().then(res => {
        if (res.avatar) {
          this.fileList = [{
            url: res.avatar
          }]
        }
        this.form = {
          ...res
        }
      }).finally(() => {
        uni.hideLoading()
      })
    }
  },
  methods: {
    successFile(e) {
      this.form.avatar = e.data
    },
    removeFile() {
      this.form.avatar = ''
    },
    submitForm() {
      uni.showToast({
        title: '暂未开发'
      })
      return
      this.$refs.uForm.validate(valid => {
        if (valid) {
          uni.showLoading({
            title: '保存中',
          })
          this.$api.updateMemberInfo({
            ...this.form,
          }).then(() => {
            uni.showToast({
              title: '保存成功',
              icon: 'none',
              duration: 2000
            })
            // 更新缓存
            this.$store.commit('SET_USERINFO', this.form)
          }).catch(() => {
            uni.hideLoading()
          }).finally(() => {
          })
        }
      })
    },

  }

}
</script>

<style lang="scss">
.page {
  .userInfo {

    background-color: #F5F7FA;
    padding: 20rpx;
    .avatar-list {
      .avatar-item {
        width: 160rpx;
        height: 160rpx;
        border-radius: 80rpx;
        border: 4px solid transparent;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .avatar-item.active {
        border: 4px solid #2AAC34;
      }
    }
    .form-box {
      border-radius: 10px;
      background-color: #FFFFFF;
      padding: 40rpx;
    }
  }
}
</style>
